<template>
  <div>
    <!-- 添加 编辑门店弹框 -->
    <el-dialog
      v-loading="loading"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="type == 1 ? '添加门店' : '编辑门店'"
      :visible="open"
      width="550px"
      append-to-body
      @close="cancel()"
    >
      <el-form
        @submit.native.prevent
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="门店名称" prop="schoolName">
          <el-input
            v-input-restrict
            show-word-limit
            maxlength="20"
            style="width: 95%"
            v-model="form.schoolName"
            placeholder="请输入门店名称"
          />
        </el-form-item>
        <el-form-item label="门店类型" prop="tagId" v-if="form.schoolId!==1">
          <div v-if="tag">
            {{ tag.tagName }}
          </div>
          <el-select
            v-model="form.tagId"
            placeholder="请选择门店类型"
            style="width: 95%"
          >
            <el-option
              v-for="(item, index) in Tag"
              :key="index"
              :label="item.tagName"
              :value="item.tagId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="大区" prop="regionId" v-if="form.schoolId!==1">
          <div v-if="region">
            {{ region.regionName }}
          </div>
          <el-select
            v-else
            clearable
            v-model="form.regionId"
            placeholder="请选择大区"
            style="width: 95%"
          >
            <el-option
              v-for="(item, index) in area"
              :key="index"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="schoolArea">
          <el-cascader
            style="width: 95%"
            v-model="form.schoolArea"
            :options="options"
            :props="TagProps"
            placeholder="请选择地址"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="schoolAddress">
          <el-input
            v-input-restrict
            style="width: 95%"
            maxlength="50"
            show-word-limit
            :rows="2"
            v-model="form.schoolAddress"
            type="textarea"
            placeholder="请输入详细地址"
          />
        </el-form-item>

        <el-form-item label="封面" prop="schoolPic">
          <div>
            <!-- 上传图片 -->
            <div
              v-if="form.schoolPic"
              class="upload-head"
              @click="editCropper()"
            >
              <img v-bind:src="form.schoolPic" class="cover" />
            </div>
            <div v-else class="upload-head" @click="editCropper()">
              <div>
                <img src="@/assets/images/add.png" class="add" alt="" />
              </div>
              <div>上传图片</div>
            </div>

            <div class="uploadTipbottom">
              建议图片比例340:220，支持jpg、png格式，图片小于5M
            </div>
          </div>

          <vuecut
            :w="340"
            :h="220"
            url=""
            @coverResult="coverResult"
            title="图片上传"
            :open.sync="vuecutshow"
          ></vuecut>
        </el-form-item>

        <el-form-item label="简介" prop="content">
          <el-input
            v-input-restrict
            style="width: 95%"
            maxlength="500"
            show-word-limit
            :autosize="{ minRows: 5, maxRows: 8 }"
            v-model="form.content"
            type="textarea"
            placeholder="请输入简介"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-preventReClick @click="open = false">取 消</el-button>
        <el-button v-preventReClick type="primary" @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import ChinaCitys from "@/utils/ChinaCitys.json";
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
import {
  getPost_school,
  addPost_school,
  updatePost_school,
} from "@/api/school/list";
import { listPost_region } from "@/api/school/area";
import { listPost_tag } from "@/api/school/tag";
export default {
  props: {
    open: Boolean,
    type: Number,
    shopId: {
      type: [Number, String],
      required: false,
    },
    tag: {
      type: Object,
      required: false,
    },
    region: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      loading: false,
      TagProps: {
        value: "lable",
        label: "lable",
        children: "children",
      },
      vuecutshow: false,
      //   学校地区 列表
      options: ChinaCitys,
      // 门店类型
      Tag: [],
      // 大区列表
      area: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        schoolName: [
          { required: true, message: "门店名称不能为空", trigger: "blur" },
        ],
        tagId: [
          { required: true, message: "门店类型不能为空", trigger: "blur" },
        ],
        schoolArea: [
          { required: true, message: "地址不能为空", trigger: "blur" },
        ],
        schoolAddress: [
          { required: true, message: "详细地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    async open(e) {
      if (e) {
        await this.getTag();
        await this.getArea();
        if (this.type == 1) {
          this.reset();
          if (this.region) {
            this.form.regionId = this.region.regionId;
          }
          if (this.tag) {
            this.form.tagId = this.tag.tagId;
          }
        } else {
          this.reset();
          this.loading = true;
          try {
            let response = await getPost_school(this.shopId);
            response.data.schoolArea = response.data.schoolArea.match(reg);
            this.form = response.data;
          } finally {
            this.loading = false;
          }
        }
      }
    },
  },
  mounted() {},
  methods: {
    async getTag() {
      let res = await listPost_tag({
        pageNum: 1,
        pageSize: 9999,
      });
      this.Tag = res.rows;
    },
    async getArea() {
      let res = await listPost_region({
        pageNum: 1,
        pageSize: 9999,
      });
      this.area = res.rows;
    },
    /** 组件返回图片 */
    coverResult(e) {
      this.form.schoolPic = e;
    },
    editCropper() {
      this.vuecutshow = true;
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在处理…",
            spinner: "el-icon-loading",
            background: "rgba(255, 255, 255, 0.6)",
          });
          let data = JSON.parse(JSON.stringify(this.form));
          data.schoolArea = data.schoolArea.join("");
          if (this.form.schoolId != undefined) {
            updatePost_school(data)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.$emit("update:open", false);
                this.$emit("refresh");
                loading.close();
              })
              .catch(() => {
                loading.close();
              });
          } else {
            addPost_school(data)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.$emit("update:open", false);
                this.$emit("refresh");
                loading.close();
              })
              .catch(() => {
                loading.close();
              });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        ccSchoolConfig: {
          applyLimit: 0,
          applyNeedCheck: 0,
          id: 0,
          remark: "",
          schoolId: 0,
          selectionPre: 0,
          status: 0,
        },
        content: "",
        deptId: 0,
        email: 0,
        endTime: "",
        startTime: "",
        time: "",
        levelId: "",
        levelName: "",
        principal: "",
        remark: "",
        schoolAddress: "",
        schoolArea: "",
        schoolId: undefined,
        schoolName: "",
        schoolNum: "",
        schoolPic: "",
        status: 0,
        tel: "",
        tagId: "",
        regionId: "",
      };
      this.resetForm("form");
    },
    cancel() {
      this.$emit("update:open", false);
      this.reset();
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .upload-head .add {
  margin: 23px auto 0 auto;
}
::v-deep .upload-head {
  width: 170px;
  height: 110px;
}
</style>
  